<template>
	<el-container class="container">
		<el-header class="header">
			<el-row class="header-row">
				<el-col :span="16" class="headerlogo">
					<div class="grid-content bg-purple">
						<img style="width:30px;height: 30px" src="../img/logo.gif" alt="无法显示图片" />
						<span class="content-title">航空售票管理系统</span>
					</div>
				</el-col>
				<el-col :span="8" class="rightsection">
					<div class="grid-content bg-purple-light">
						<span class="content-title">欢迎您，{{username}}</span>
						<span class="el-icon-s-unfold logout" @click="logout">退出</span>
					</div>
				</el-col>
			</el-row>
		</el-header>
		<el-container>
			<el-aside style="width: 150px;">
				<el-tabs v-model="activeName" @tab-click="handleClick" :tab-position="tabPosition"
					style="height: 100%;">
					<el-tab-pane name="首页" label="首页"></el-tab-pane>
					<el-tab-pane name="航班管理" label="航班管理"></el-tab-pane>
					<el-tab-pane name="航线管理" label="航线管理"></el-tab-pane>
					<el-tab-pane v-if="auth == 0" name="用户管理" label="用户管理"></el-tab-pane>
					<el-tab-pane v-if="auth == 1" name="我的订单" label="我的订单"></el-tab-pane>
					<el-tab-pane v-if="auth == 0" name="订单管理" label="订单管理"></el-tab-pane>
					<el-tab-pane name="我的信息" label="我的信息"></el-tab-pane>
				</el-tabs>
			</el-aside>
			<el-main class="main">
				<Home v-if="activeName === '首页'"></Home>
				<Flight v-if="activeName === '航班管理' " :auth="auth"></Flight>
				<Route v-if="activeName === '航线管理'" :auth="auth"></Route>
				<UserInfo v-if="activeName === '用户管理'" :auth="auth"></UserInfo>
				<MyOrder v-if="activeName === '我的订单' || activeName === '订单管理'" :auth="auth" :username="username">
				</MyOrder>
				<MyInfo v-if="activeName === '我的信息'" :auth="auth" :username="username"></MyInfo>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	import Home from './home.vue'
	import MyInfo from './my-info.vue'
	import UserInfo from './user-info.vue'
	import MyOrder from './my-order.vue'
	import Route from './route.vue'
	import Flight from './flight.vue'
	export default {
		name: "Index",
		components: {
			Home,
			UserInfo,
			MyInfo,
			MyOrder,
			Route,
			Flight
		},
		data() {
			return {
				tabPosition: 'left',
				username: '',
				account: '',
				activeName: "首页",
				auth: 0
			};
		},
		methods: {
			logout() {
				this.$router.push("/")
			},
			handleClick(tab, event) {
				this.activeName = tab.label
				console.log(this.activeName)
			}
		},
		mounted() {
			console.log(this.$route.query)
			if (Object.keys(this.$route.query).length === 0) {
				console.log("is null object")
				this.$router.push("/")
				this.$message.error('认证信息已过期，请重新登录');
				return;
			}
			if (this.$route.query.params['username'] == null) {
				this.$router.push("/")
				this.$message.error('认证信息已过期，请重新登录');
				return;
			}
			this.username = this.$route.query.params.username
			this.account = this.$route.query.params.account
			this.auth = this.$route.query.params.auth
			console.log(this.account)
		}
	};
</script>
<style scoped>
	.container {
		height: 100vh;
		font-size: 15px;
		background-image: linear-gradient(#2775b6, #4e7ca1);
	}

	.header {
		background-color: red;
		/* 浏览器不支持时显示 */
		background-image: linear-gradient(#1ba784, #5698c3);
	}

	.main {
		background: white;
	}

	.header-row {
		line-height: 3.75rem;
	}

	.content-title {
		color: #2d2e36;
		font-size: 1.4rem;
		font-family: fangsong;
	}

	.logout {
		padding-left: 20px;
	}

	.el-tabs__content {
		overflow: hidden;
		position: relative;
		height: 100%;
	}
</style>
